<template>
  <div class="loginPage">
    <el-card class="loginPanel">
      <div class="loginPanelInner">
        <div class="logo">
          <img src="../assets/htuLogo.png">
        </div>
        <el-divider direction="vertical" border-style="dashed" class="split" />
        <div class="loginForm">
          <div class="systemName"> 用户注册 </div>
          <el-form ref="formRef" size="large" :model="form" status-icon
                   label-width="120px" class="form">
            <el-form-item label="用户名：" prop="username">
              <el-input v-model="form.username" placeholder="请输入用户名" autocomplete="off"
                        suffix-icon="UserFilled" />
            </el-form-item>
            <el-form-item label="昵称：" prop="nickname">
              <el-input v-model="form.nickname" placeholder="请输入昵称" autocomplete="off"
                        suffix-icon="UserFilled" />
            </el-form-item>
            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号" autocomplete="off"
                        suffix-icon="UserFilled" />
            </el-form-item>
            <el-form-item label="邮箱：" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" autocomplete="off"
                        suffix-icon="UserFilled" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sendVerificationCode(form.email)" class="loginBtn">
                发送邮箱验证码 </el-button>
            </el-form-item>
            <el-form-item label="验证码：" prop="registerCode">
              <el-input v-model="form.registerCode" placeholder="请输入验证码" autocomplete="off"
                        suffix-icon="UserFilled" />
            </el-form-item>
            <el-form-item label="角色：" prop="role">
              <el-select v-model="form.role" placeholder="请选择角色" style="width: 200px;">
                <el-option label="老师" value="2"></el-option>
                <el-option label="学生" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="flex justify-center space-x-4">
              <el-button type="primary" @click="handleRegister(form)">
                注册 </el-button>
              <el-button type="primary" @click="handleCancel()">
                取消 </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <div class="footer">
      @Copyright 校园拼课系统
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption, ElMessage} from 'element-plus';
import {useRouter} from "vue-router";
import userAPI, {register} from "@/api/module/user";

const route = useRouter();
const formRef = ref(null);
const form = ref({
  username: '',
  nickname: '',
  phone: '',
  email: '',
  registerCode: '',
  role: ''
});

const sendVerificationCode = async (email) => {
  await userAPI.sendRegisEmail(email).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: '验证码已发送',
        type: 'success',
      })
    } else {
      ElMessage.error(res.msg);
    }
  })
};

const handleRegister = async (form) => {
  await userAPI.register(form).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: '注册成功',
        type: 'success',
      })
      route.push({
        path:'/login'
      });
    } else {
      ElMessage.error(res.msg);
    }
  })
};

const handleCancel = () => {
  form.value = {
    username: '',
    nickname: '',
    phone: '',
    email: '',
    registerCode: '',
    role: ''
  };
  route.push({
    path:'/login'
  });
};
</script>

<style scoped>
.loginPage {
  width: 100%;
  height: 800px;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-items: center;
  background: linear-gradient(133deg, #1994bb, #19acbb, #19b4bb, #2a89db);
}

.loginPage .loginPanel {
  width: 60%;
  height: 60%;
  min-width: 600px;
  max-width: 1000px;
  min-height: 600px;
  max-height: 800px;
  margin: 0 auto;
}

.loginPage .loginPanel>>>.el-card__body {
  width: 100%;
  height: 100%;
}

.loginPage .loginPanel .loginPanelInner {
  width: 100%;
  height: 100%;
  display: flex;
}

.loginPage .loginPanel .loginPanelInner .logo {
  width: 40%;
  text-align: center;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-items: center;
}

.loginPage .loginPanel .loginPanelInner .logo img {
  width: 50%;
}

.loginPage .loginPanel .loginPanelInner .split {
  height: calc(100% - 40px);
}

.loginPage .loginPanel .loginPanelInner .loginForm {
  flex: 1;
}

.loginPage .loginPanel .loginPanelInner .loginForm .systemName {
  text-align: center;
  font-size: 30px;
  line-height: 60px;
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.loginPage .loginPanel .loginPanelInner .loginForm .form {
  width: 80%
}

.loginPage .loginPanel .loginPanelInner .loginForm .form .loginBtn {
  width: 100%;
}

.loginPage .loginPanel .loginPanelInner .loginForm .form .loginBtnOther {
  width: 50%;
}

.loginPage .loginPanel .loginPanelInner .loginForm .form .captchaSrc {
  width: 100px;
  height: 100%;
  padding-left: 10px;
}

.loginPage .loginPanel .loginPanelInner .loginForm .form .captchaSrc img {
  width: 100px;
  height: 100%;
  cursor: pointer;
}

.loginPage .loginPanel .loginPanelInner .loginForm .form .registerBtn {
  text-align: right;
  line-height: 40px;
  margin-bottom: 5px;
}

.footer {
  position: fixed;
  bottom: 0px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #fff;
}
</style>